<template>
	<div>
		<el-row :gutter="40" type="flex" justify="space-around">
			<el-col :span="6">
				<div class="grid-content">
					<el-row type="flex">
						<el-col :span="12"><i class="el-icon-user"></i></el-col>
						<el-col :span="12">
							<h2 class="grid-title">新增人数</h2>
							<p class="grid-text">1234人</p>
						</el-col>
					</el-row>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="grid-content">
					<el-row type="flex">
						<el-col :span="12"><i class="el-icon-user"></i></el-col>
						<el-col :span="12">
							<h2 class="grid-title">新增人数</h2>
							<p class="grid-text">1234人</p>
						</el-col>
					</el-row>
				</div>
			</el-col>
			<el-col :span="6">
				<div class="grid-content">
					<el-row type="flex">
						<el-col :span="12"><i class="el-icon-user"></i></el-col>
						<el-col :span="12">
							<h2 class="grid-title">新增人数</h2>
							<p class="grid-text">1234人</p>
						</el-col>
					</el-row>
				</div>
			</el-col>

			<el-col :span="6">
				<div class="grid-content">
					<el-row type="flex">
						<el-col :span="12"><i class="el-icon-user"></i></el-col>
						<el-col :span="12">
							<h2 class="grid-title">新增人数</h2>
							<p class="grid-text">1234人</p>
						</el-col>
					</el-row>
				</div>
			</el-col>

		</el-row>

		<el-row>

			<el-col :span="24">

				<div class="ecarht-box">
					<ve-line class="ve-ecarht" :data="chartData"></ve-line>
				</div>

			</el-col>
		</el-row>

		<el-row :gutter="20" type="flex" justify="space-around">

			<el-col :span="8">
				<div class="ecarht-box">
					<ve-histogram class="ve-ecarht" :data="histogramData"></ve-histogram>
				</div>
			</el-col>

			<el-col :span="8">
				<div class="ecarht-box">
					<ve-pie :data="pieData" :settings="chartSettings"></ve-pie>
				</div>
			</el-col>

			<el-col :span="8">
				<div class="ecarht-box">
					<ve-map :data="mapData"></ve-map>
				</div>
			</el-col>

		</el-row>
		<el-row>
			<el-col :span="24">
				<template>
					<el-table size="small" highlight-current-row empty-text="暂无数据" :data="tableData" stripe border style="width: 100%">
						<el-table-column sortable prop="date" label="日期" width="180">
						</el-table-column>
						<el-table-column prop="name" label="姓名" width="180">
						</el-table-column>
						<el-table-column prop="address" label="地址">
						</el-table-column>
					</el-table>
				</template>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	export default {
		name: 'dashboard',
		data() {
			this.chartSettings = {
				dimension: '日期',
				metrics: '访问用户'
			}
			return {
				tableData: [{
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1517 弄'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1519 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}, {
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1517 弄'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1519 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1519 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}],
				chartData: {
					columns: ['日期', '访问用户', '下单用户', '下单率'],
					rows: [{
							'日期': '1/1',
							'访问用户': 1393,
							'下单用户': 1093,
							'下单率': 0.32
						},
						{
							'日期': '1/2',
							'访问用户': 3530,
							'下单用户': 3230,
							'下单率': 0.26
						},
						{
							'日期': '1/3',
							'访问用户': 2923,
							'下单用户': 2623,
							'下单率': 0.76
						},
						{
							'日期': '1/4',
							'访问用户': 1723,
							'下单用户': 1423,
							'下单率': 0.49
						},
						{
							'日期': '1/5',
							'访问用户': 3792,
							'下单用户': 3492,
							'下单率': 0.323
						},
						{
							'日期': '1/6',
							'访问用户': 4593,
							'下单用户': 4293,
							'下单率': 0.78
						}
					]
				},
				histogramData: {
					columns: ['日期', '访问用户', '下单用户', '下单率'],
					rows: [{
							'日期': '1/1',
							'访问用户': 1393,
							'下单用户': 1093,
							'下单率': 0.32
						},
						{
							'日期': '1/2',
							'访问用户': 3530,
							'下单用户': 3230,
							'下单率': 0.26
						},
						{
							'日期': '1/3',
							'访问用户': 2923,
							'下单用户': 2623,
							'下单率': 0.76
						},
						{
							'日期': '1/4',
							'访问用户': 1723,
							'下单用户': 1423,
							'下单率': 0.49
						},
						{
							'日期': '1/5',
							'访问用户': 3792,
							'下单用户': 3492,
							'下单率': 0.323
						},
						{
							'日期': '1/6',
							'访问用户': 4593,
							'下单用户': 4293,
							'下单率': 0.78
						}
					]
				},
				pieData: {
					columns: ['日期', '访问用户'],
					rows: [{
							'日期': '1/1',
							'访问用户': 1393
						},
						{
							'日期': '1/2',
							'访问用户': 3530
						},
						{
							'日期': '1/3',
							'访问用户': 2923
						},
						{
							'日期': '1/4',
							'访问用户': 1723
						},
						{
							'日期': '1/5',
							'访问用户': 3792
						},
						{
							'日期': '1/6',
							'访问用户': 4593
						}
					]
				},
				mapData: {
					columns: ['位置', '税收', '人口', '面积'],
					rows: [{
							'位置': '吉林',
							'税收': 123,
							'人口': 123,
							'面积': 92134
						},
						{
							'位置': '北京',
							'税收': 1223,
							'人口': 2123,
							'面积': 29234
						},
						{
							'位置': '上海',
							'税收': 2123,
							'人口': 1243,
							'面积': 94234
						},
						{
							'位置': '浙江',
							'税收': 4123,
							'人口': 5123,
							'面积': 29234
						}
					]
				}
			}
		},
		 methods: {
		  format(percentage) {
			return percentage === 100 ? '满' : `${percentage}%`;
		  }
		}
	}
</script>

<style lang="less" scoped>
	@import 'dashboard.less';
</style>
